<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for="(product,index) in products" :key="index">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">减少价格</button>
            <button @click="minusPriceAsync">异步减少价格</button>
        </ul>
    </div>
</template>

<script>
export default {
    // props: ['products'],  // 早先用props传值引用PriceList.vue的data()，下面换成store。ProductListOne.vue、ProductListTwo.vue的data区域都进行修改
    data () {
        return {
            products: this.$mymodule.state.a.products  //获取store中state的数据
        }
    },
    methods: {
        minusPrice() {
            // 每次触发价格减二
            console.log(this.$mymodule.state.a)
            this.$mymodule.state.a.commit('saleProducts',2)
            // this.$mymodule.commit('minusPrice',2)
        },
        minusPriceAsync() {
            // 触发延迟3s后价格减五
            this.$mymodule.state.a.dispatch('minusPriceAsync', 5); //分发actions中的minusPriceAsync这个异步函数
        }
    },
    computed: {
        saleProducts() {
            console.log(this.$mymodule.state.a.getters)
            return this.$mymodule.state.a.getters;
        }
    }
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>